<template>
  <div>
    <el-row>
      <el-col :span="20" :offset="2">
        <el-card style="width: 100%; margin-top: 20px;">
          <h1 style="text-align: center">我的订单————代付款</h1>
          <el-table :data="orderList" style="width: 100%;margin-top:30px;" stripe>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-table
                  :data="props.row.orderItemList"
                  style="width: 100%">
                  <el-table-column 
                    align="center" 
                    label="图片">
                    <template slot-scope="scope">
                      <img :src="scope.row.productPic" style="width: 100px; height: 100px" class="user-avatar">
                    </template>
                  </el-table-column>
                  <el-table-column 
                    prop="productName" 
                    align="center" 
                    label="商品名称">
                  </el-table-column>
                  <el-table-column 
                    prop="productPrice" 
                    align="center" 
                    label="销售价格">
                  </el-table-column>
                  <el-table-column 
                    prop="productQuantity" 
                    align="center" 
                    label="购买数量">
                  </el-table-column>
                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="toInfo(scope.row.productId)">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column 
              prop="code" 
              align="center" 
              label="订单编号"
              width="150">
            </el-table-column>
            <el-table-column 
              prop="payAmount" 
              align="center" 
              label="实付金额">
            </el-table-column>
            <el-table-column 
              prop="paymentat" 
              align="center" 
              label="支付时间">
            </el-table-column>
            <el-table-column 
              prop="deliveryCompany" 
              align="center" 
              label="物流公司"
              :show-overflow-tooltip='true'>
            </el-table-column>
            <el-table-column 
              prop="deliverySn" 
              align="center" 
              label="物流编号">
            </el-table-column>
            <el-table-column 
              prop="deliveryat" 
              align="center" 
              label="发货时间">
            </el-table-column>
            <el-table-column 
              prop="integration" 
              align="center" 
              label="可获得积分">
            </el-table-column>
            <el-table-column 
              prop="growth" 
              align="center" 
              label="可获成长值">
            </el-table-column>
            <el-table-column 
              prop="confirmStatus" 
              align="center" 
              label="收货状态"
              :show-overflow-tooltip='true'>
            </el-table-column>
            <el-table-column 
              prop="receiveat" 
              align="center" 
              label="收货时间">
            </el-table-column>
            <el-table-column 
              align="center" 
              label="订单状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status === 0" type="danger">待付款</el-tag>
                <el-tag v-else-if="scope.row.status === 1" type="warning">代发货</el-tag>
                <el-tag v-else-if="scope.row.status === 2">已发货</el-tag>
                <el-tag v-else-if="scope.row.status === 3" type="success">已完成</el-tag>
                <el-tag v-else-if="scope.row.status === 4" type="info">已关闭</el-tag>
                <el-tag v-else-if="scope.row.status === 5" type="info">退货申请中</el-tag>
              </template>
            </el-table-column>
            <el-table-column 
              prop="createat" 
              align="center" 
              label="创建时间">
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作">
              <template slot-scope="scope">
                <!-- 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->退货申请中 -->
                <el-button v-if="scope.row.status === 0" type="text" size="small" @click="toPay(scope)">去支付</el-button>
                <!-- <el-button type="text" size="small" @click="handleEdit(scope)">详情</el-button> -->
                <el-button v-if="scope.row.status === 0 || scope.row.status === 1" type="text" size="small" @click="toCancel(scope)">取消订单</el-button>
                <el-button v-if="scope.row.status === 2 || scope.row.status === 3" type="text" size="small" @click="toReturn(scope)">申请退货</el-button>
                <el-button v-if="scope.row.status === 2" type="text" size="small" @click="toConfirm(scope)">确认收货</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="block">
              <span class="demonstration"></span>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.currentPage"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="page.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
              </el-pagination>
          </div>

        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { getOrders, orderDetail, toPay, toCancel, toConfirm } from '@/api/order'

export default {
  name: "index",
  data() {
    return {
      order: {},
      orderList: [

      ],
      queryParams: {
        pageNum: '',
        pageSize: '',
        status: -1
      },
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  created() {
    this.queryParams.status = this.$route.query.status
    this.getOrders()
  },
  methods: {
      async getOrders() {
        const res = await getOrders(this.queryParams)
        console.log("getOrders",res)

        const { list, pageNum, pageSize, total, totalPage } = res.data

        this.orderList = list
        this.page.total = total
        this.page.currentPage = pageNum
      },
    toPay(scope) {
      // TODO 支付订单
      this.$confirm('确认支付订单：'+scope.row.code+'?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
          })
        .then(async() => {
          await toPay(scope.row.id).then(() => {
            this.$message({
              type: 'success',
              message: scope.row.code+'支付成功'
            })
          })
          this.getOrders()
      })
    },
    toCancel(scope) {
      // TODO 取消订单
      this.$confirm('确认取消订单：'+scope.row.code+'?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
          })
        .then(async() => {
          await toCancel(scope.row.id).then(() => {
            this.$message({
              type: 'success',
              message: scope.row.code+'订单已取消'
            })
          })
          this.getOrders()
      })
    },
    toReturn(scope) {
      // TODO 退货申请
      // this.$confirm('确认支付订单：'+scope.row.code+'?', '提示', {
      //   confirmButtonText: '确认',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      //     })
      //   .then(async() => {
      //     await toPay(scope.row.id).then(() => {
      //       this.$message({
      //         type: 'success',
      //         message: '支付成功'
      //       })
      //     })
      // })
    },
    toConfirm(scope) {
      // TODO 确认收货
      this.$confirm('确认收货：'+scope.row.code+'?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
          })
        .then(async() => {
          await toConfirm(scope.row.id).then(() => {
            this.$message({
              type: 'success',
              message: scope.row.code+'订单已完成'
            })
          })
      })
    },
    toInfo(id) {
      console.log("id",id)
      this.$router.push({path: '/product', query: {id: id}})
    },
    //分页
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
    },
  }

}
</script>

<style scoped>
  .h {
    height: 25px;
  }
</style>
